<!--
* @author wn
* @date 2022/09/19 14:26:57
* @description: 取消订单 组件
* order是 proxy 对地址 指向 orderItem order 同步修改
!-->
<template>
	<xtx-dialog title="取消订单" v-model="dialogVisible">
		<!-- 默认插槽 -->
		<div class="cancel-info">
			<p>取消订单后，本单享有的优惠可能会一并取消，是否继续？</p>
			<p>请选择取消订单的原因（必选）：</p>
			<div class="btn">
				<xtx-button
					v-for="reason in cancelReason"
					:key="reason"
					size="large"
					@click="active = reason"
					:class="{ active: active === reason }"
					href="javascript:;"
				>
					{{ reason }}
				</xtx-button>
			</div>
		</div>
		<!-- 具名插槽 -->
		<template #footer>
			<xtx-button
				@click="dialogVisible = false"
				type="gray"
				style="margin-right: 20px"
			>
				取消
			</xtx-button>
			<xtx-button @click="confirm" type="primary">确认</xtx-button>
		</template>
	</xtx-dialog>
</template>
<script>
import { ref } from 'vue'
import { cancelReason } from '@/network/constants'
import Message from '@/components/library/message'
import { cancelOrder } from '@/network/order'

export default {
	name: 'OrderCancel',
	setup() {
		const dialogVisible = ref(false)
		const currentOrder = ref(null)
		const active = ref('')

		const open = order => {
			dialogVisible.value = true
			currentOrder.value = order
			active.value = ''
		}

		// 点击 确认取消 按钮
		const confirm = async () => {
			if (!active.value) {
				return Message({ type: 'warn', message: '请选择取消订单的原因' })
			}
			// 调用  取消订单 API
			await cancelOrder(currentOrder.value.id, active.value)
			Message({ type: 'success', message: '取消订单成功' })
			// 更新订单状态(6为已取消)
			currentOrder.value.orderState = 6
			dialogVisible.value = false
		}

		return { dialogVisible, open, cancelReason, active, confirm }
	},
}
</script>
<style scoped lang="less">
.xtx-dialog {
	:deep(.wrapper) {
		width: 620px;
	}
}
.cancel-info {
	p {
		font-size: 16px;
		line-height: 35px;
		&:nth-child(2) {
			color: #999;
		}
	}
	.btn {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 20px;
		.xtx-button {
			margin-bottom: 20px;
			&:hover,
			&.active {
				border-color: @xtxColor;
				background: #e3f9f4;
			}
		}
	}
}
</style>
